<template>
  <div>
    <!--  顶部-->
    <div class="sidebar-top">
      <div>后台管理系统</div>
      <div>退出</div>
    </div>
    <div class="sidebar-cont">
      <el-menu :default-active="ac_index" background-color="#FFFFFF" @select="Selected">
        <div v-for="(item,index) in menu" :key="index">
          <el-menu-item v-if="item.submenu.length==0" :index="item.id">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.title }}</span></el-menu-item>
          <el-sub-menu v-if="item.submenu.length>0" :index="item.id">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <div v-for="(two,index_two) in item.submenu" :key="index_two">
            <el-menu-item :index="two.id">
              <span>&nbsp;&nbsp;{{two.title}}</span>
            </el-menu-item>
            </div>
          </el-sub-menu>
        </div>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue";

// const handleOpen = (key, keyPath) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key, keyPath) => {
//   console.log(key, keyPath)
// }
const ac_index = ref("1")
const Selected=(index,path)=> {
  localStorage.setItem('menu_id',JSON.stringify(index))
}
onMounted(()=>{
  ac_index.value=JSON.parse(localStorage.getItem('menu_id'))
})
const array = [
  {
    id: '1',
    icon: 'Histogram',
    title: '数据分析',
    router: '',
    submenu: [],
  },
  {
    id: '2',
    icon: 'Avatar',
    title: '用户列表',
    router: '',
    submenu: [],
  },
  {
    id: '3',
    icon: 'List',
    title: '订单管理',
    router: '',
    submenu: [],
  },
  {
    id: '4',
    icon: 'Bowl',
    title: '菜品管理',
    router: '',
    submenu: [],
  },
  {
    id: '5',
    icon: 'UserFilled',
    title: '员工管理',
    router: '',
    submenu: [
      {
        id: '5-1',
        icon: '',
        title: '员工详情',
        router: '',
      },
      {
        id: '5-2',
        icon: '',
        title: '课程学习',
        router: '',
      }
    ],
  }
]
const menu = reactive(array)

</script>

<style scoped>

</style>